import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Form, InputNumber, Switch, Slider, Card, Row, Col, Typography } from 'antd';
import { selectSelectedSegment, SelectedSegmentInfo } from '@/store/selectedSegmentSlice';
import '@/styles/BaseConfigForm.css';
import eventBus from '@/utils/eventBus';
import styled from 'styled-components';

const { Text } = Typography;

// 全局深色主题样式
const GlobalDarkThemeStyle = styled.div`
    .ant-form-item-label > label {
        color: #ffffff !important;
    }
    .ant-slider-rail {
        background-color: #555555 !important;
    }
    .ant-slider-track {
        background-color: #715bb8 !important;
    }
    .ant-slider-handle {
        border-color: #ffffff !important;
        background-color: #3c3c3c !important;
    }
    .ant-slider-handle:hover {
        border-color: #715bb8 !important;
    }
    .ant-slider-handle:focus {
        box-shadow: 0 0 0 5px rgba(113, 91, 184, 0.3) !important;
    }
`;

// 辅助组件：用于创建标签-滑块-数值输入的组合行
const SliderInputRow: React.FC<{
    label: string;
    name: any;
    sliderProps: any;
    inputProps: any;
}> = ({ label, name, sliderProps, inputProps }) => (
    <Form.Item>
        <Row align="middle" gutter={16}>
            <Col span={6}>
                <Text style={{ color: '#FFFFFF' }}>{label}</Text>
            </Col>
            <Col span={12}>
                <Form.Item name={name} noStyle>
                    <Slider {...sliderProps} />
                </Form.Item>
            </Col>
            <Col span={6}>
                <Form.Item name={name} noStyle>
                    <InputNumber
                        style={{
                            width: '90%',
                            background: 'linear-gradient(135deg,rgb(90, 83, 83) 0%, #1e1e1e 100%)',
                            color: '#ffffff',
                            border: '1px solid #404040',
                        }}
                        {...inputProps}
                    />
                </Form.Item>
            </Col>
        </Row>
    </Form.Item>
);

// 表单数据接口，基于SelectedSegmentInfo
interface VideoConfigFormData extends SelectedSegmentInfo {
    // 继承SelectedSegmentInfo的所有字段
}
const VideoConfigForm: React.FC = () => {
    const [form] = Form.useForm();

    // 从Redux store获取选中的片段信息
    const selectedSegment = useSelector(selectSelectedSegment);

    // 处理值变化 - 只更新UI状态，不立即保存
    const handleValuesChange = (changedValues: any, allValues: VideoConfigFormData) => {

        // 只有在表单值真正发生变化时才发送事件
        // 避免在Tab切换或初始化时触发
        if (Object.keys(changedValues).length > 0) {
            const formData = {
                draftId: selectedSegment.draftId,
                trackId: selectedSegment.trackId,
                id: selectedSegment.id,
                material_id: selectedSegment.material_id,
                start: allValues.start, // 时间配置已注释
                duration: allValues.duration, // 时间配置已注释
                volume: allValues.volume,
                clip: allValues.clip,
            };
            // 发送表单数据到事件总线
            (eventBus as any).emit('form:data:changed', {
                segmentId: selectedSegment.id,
                formData: formData,
                formType: 'video',
            });
        }
    };

    // 初始化表单值
    useEffect(() => {
        if (selectedSegment) {
            form.setFieldsValue(selectedSegment);
        } else {
            // 如果没有选中视频片段，重置表单
            form.resetFields();
        }
    }, [selectedSegment, form]);

    return (
        <GlobalDarkThemeStyle>
            <Form form={form} layout="vertical" autoComplete="off" onValuesChange={handleValuesChange}>
                {/* 时间配置 - 暂时注释 */}
                {/* <Card title={<div style={{ color: '#FFFFFF' }}>时间配置</div>} size="small" style={{ marginBottom: 16 }} className={'form-card'}>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item label="目标开始时间" name={['start']} rules={[{ required: true, message: '请输入开始时间' }]}>
                                <InputNumber
                                    min={0}
                                    placeholder="开始时间（微秒）"
                                    style={{
                                        width: '100%',
                                        backgroundColor: '#2a2a2a',
                                        borderColor: '#434343',
                                        color: '#ffffff',
                                    }}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="目标持续时间" name={['duration']} rules={[{ required: true, message: '请输入持续时间' }]}>
                                <InputNumber
                                    min={1}
                                    placeholder="持续时间（微秒）"
                                    style={{
                                        width: '100%',
                                        backgroundColor: '#2a2a2a',
                                        borderColor: '#434343',
                                        color: '#ffffff',
                                    }}
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                </Card> */}
                <Card title={<div style={{ color: '#FFFFFF' }}>播放设置</div>} size="small" style={{ marginBottom: 16 }} className={'form-card'}>
                    <SliderInputRow label="音量" name="volume" sliderProps={{ min: 0, max: 2, step: 0.01 }} inputProps={{ min: 0, max: 2, step: 0.01 }} />
                </Card>

                {/* 裁剪设置 */}
                <Card title={<div style={{ color: '#FFFFFF' }}>裁剪设置</div>} size="small" style={{ marginBottom: 16 }} className={'form-card'}>
                    <SliderInputRow label="透明度" name={['clip', 'alpha']} sliderProps={{ min: 0, max: 1, step: 0.01 }} inputProps={{ min: 0, max: 1, step: 0.01 }} />

                    <SliderInputRow label="旋转角度" name={['clip', 'rotation']} sliderProps={{ min: -360, max: 360, step: 1 }} inputProps={{ min: -360, max: 360, step: 1 }} />

                    <SliderInputRow label="X轴缩放" name={['clip', 'scale', 'x']} sliderProps={{ min: 0, max: 1, step: 0.01 }} inputProps={{ min: 0, max: 1, step: 0.01 }} />

                    <SliderInputRow label="Y轴缩放" name={['clip', 'scale', 'y']} sliderProps={{ min: 0, max: 1, step: 0.01 }} inputProps={{ min: 0, max: 1, step: 0.01 }} />
                    <SliderInputRow label="X轴位置" name={['clip', 'transform', 'x']} sliderProps={{ min: 0, max: 1, step: 0.01 }} inputProps={{ min: 0, max: 1, step: 0.01 }} />

                    <SliderInputRow label="Y轴位置" name={['clip', 'transform', 'y']} sliderProps={{ min: 0, max: 1, step: 0.01 }} inputProps={{ min: 0, max: 1, step: 0.01 }} />
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item label="水平翻转" name={['clip', 'flip', 'horizontal']} valuePropName="checked">
                                <Switch style={{ backgroundColor: '#555555' }} checkedChildren={<div style={{ color: '#ffffff' }}>✓</div>} unCheckedChildren="关闭" />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="垂直翻转" name={['clip', 'flip', 'vertical']} valuePropName="checked">
                                <Switch style={{ backgroundColor: '#555555' }} checkedChildren={<div style={{ color: '#ffffff' }}>✓</div>} unCheckedChildren="关闭" />
                            </Form.Item>
                        </Col>
                    </Row>
                </Card>
            </Form>
        </GlobalDarkThemeStyle>
    );
};

export default VideoConfigForm;
export type { VideoConfigFormData };
